import React, { Component } from 'react'
import './3-color.css'
export default class ColorPicker extends Component {
    state = {
        r:0,
        g:0,
        b:0
    }
    
  render() {
    let {r,g,b} = this.state
    return (
        
      <div className='color-container'>
        <div className='color-wrapper'>
            <div className="color-show" style={{background:`rgb(${r},${g},${b})`}}></div>
            <hr />
            R: <input type="range" value={r} min='0' max='255' onChange={this.setColor('r')}/><br />
            G: <input type="range" value={g} min='0' max='255' onChange={this.setColor('g')}/><br />
            B: <input type="range" value={b} min='0' max='255' onChange={this.setColor('b')}/><br />
        </div>
      </div>
    )
  }
  setColor = (type)=>{
    return (e)=>{
        this.setState({
            [type] : e.target.value
        })
    }
  }
}
